<template>
	<div style="display: flex;align-items: center;">
		<div id="main" style="min-width: 130px;height:180px;"></div>
		<div style="margin-left: 20px;">
			<div style="display: flex ;align-items: center;margin-bottom: 10px;">
				<div style="width: 15px;height: 8px;background-color:#00dc00 ;margin-right: 5px;border-radius: 3px;">
					
				</div>
				东区:{{jieyuemsg.borrow_zhanbi.dong_num.value}}
			</div>
			
			<div style="display: flex ;align-items: center;margin-bottom: 10px;">
				<div style="width: 15px;height: 8px;background-color:#1890fe;margin-right: 5px;border-radius: 3px;">
					
				</div>
			
				西区:{{jieyuemsg.borrow_zhanbi.xi_num.value}}
			</div>
			<div style="display: flex ;align-items: center;margin-bottom: 10px;">
				<div style="width: 15px;height: 8px;background-color:#f9a457;margin-right: 5px;border-radius: 3px;">
					
				</div>
			
				南区:{{jieyuemsg.borrow_zhanbi.xi_num.value}}
			</div>
			<div style="display: flex ;align-items: center;margin-bottom: 10px;">
				<div style="width: 15px;height: 8px;background-color:#f77777;margin-right: 5px;border-radius: 3px;">
					
				</div>
			
				北区:{{jieyuemsg.borrow_zhanbi.xi_num.value}}
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		name:"tubiaoa",
		props: ['jieyuemsg'],
		  data(){
			  return{
			  	jiemsg:{}
			  }
		  },
		  watch:{
			  jieyuemsg(oldval,newval){
				  this.getmsg()
			  }
		  },
		  created () {
			
		  },
		  mounted(){
			this.getmsg()
		  },
		  methods:{
			  async getmsg(){
				  this.jiemsg=this.jieyuemsg
				  let that =this
				  if( this.jiemsg.borrow_zhanbi){
					  setTimeout(res=>{
						  that.getbiao()
					  },500)
					 
				  }
				  
			  },
			  getbiao(){
				
				let b=this.jiemsg.borrow_zhanbi
				
				  console.log('这是a',b)
				var myChart = echarts.init(document.getElementById('main'));
				  var option = {
				    title: {
				      text: b.zhanbi.value,
				      left: 'center',
				      top: 80.5,
				      textStyle:{
				        color:'#1890fe'
				      }
				    },
				    visualMap: {
				      show: false,
				    },
				    series: [
				      {
				        type: 'pie',
				        //环形显示饼状图，实际上显示的是50-80之间的部分
				        //上限不建议设置为100，echarts自带动画效果，设置为100动画效果很丑
				        radius: ['65%', '80%'],
				        center: ['50%', '50%'],
					 legend: {
							orient: 'vertical',
							left: 'right',
							data: ['东区', '西区', ]
						},
				        data: [   
				        //itemSyle是单项的背景颜色设置。
				          { value:b.dong_num.value , itemStyle: { color: '#00dc00' } },
				          { value:b.xi_num.value , itemStyle: { color: '#1890fe' } },
						   { value:b.nan_num.value , itemStyle: { color: '#f9a457' } },
						   { value:b.bei_num.value , itemStyle: { color: '#f77777' } },
				        ],
				        label: {
				          //将视觉引导图关闭
				          show: false,
				        },
				        itemStyle:{
				        	//设置的是每项之间的留白
				          borderWidth:0,
				          borderColor:'#fff'
				        },
				        // 初始化echarts的动画效果
				        animationType: 'scale',
				        animationEasing: 'elasticOut',
				        animationDelay: function (idx) {
				          return Math.random() * 200;
				        }
				      }
				    ]}
				  		
				        // 使用刚指定的配置项和数据显示图表。
				        myChart.setOption(option);
			  }
		  },
		
	}
</script>

<style>
</style>